<template>
  <div class="add-payslip-second">
    <a-row class="content-top">
      <step :current="1" />
    </a-row>
    <div class="content-con" style="margin-top: 24px">
      <a-row class="title">
        <strong>发送方式</strong>
      </a-row>
      <a-row class="sub_tit mg_b20"> 选择工资条的发送方式，支持发送微信通知和短信通知 </a-row>
      <a-row>
        <a-select v-model="postParams.sendType" placeholder="发送方式" style="width: 337px" @change="handleChange">
          <a-select-option :value="1">微信</a-select-option>
        </a-select>
        <a-tooltip placement="right">
          <template slot="title">
            <span>只会给绑定了微信的员工发送工资条</span>
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
      </a-row>
      <a-row class="mg_t12 mg_b24">
        共
        <span class="primary">{{ $route.query.unSendCount }}</span>
        名员工，预计发送
        <span class="primary">{{ $route.query.unSendCount }}</span>
        条{{ ["微信", "短信"][postParams.sendType - 1] }}通知
      </a-row>
      <a-row class="title">
        <strong>工资条确认</strong>
      </a-row>
      <a-row class="sub_tit mg_b20"> 设定工资条的确认时间，超出规定时间后系统自动确认 </a-row>
      <a-row>
        <a-input-number
          v-model="postParams.autoCheckHours"
          placeholder="请输入"
          style="width: 200px"
          class="mg_r24"
          :min="0"
          :precision="0"
          :formatter="limitNumber"
          :parser="limitNumber"
        />
        <a-select
          v-model="postParams.autoCheckUnit"
          default-value="hour"
          placeholder="请选择"
          style="width: 113px"
          @change="handleChangeTime"
        >
          <a-select-option :value="1">小时</a-select-option>
          <a-select-option :value="2">天</a-select-option>
        </a-select>
      </a-row>
      <a-row class="title mg_t20">
        <strong>工资条显示</strong>
      </a-row>
      <a-row class="sub_tit mg_b20"> 设定工资条的显示规则，可以选择不显示工资条为0的值 </a-row>
      <a-row>
        <strong>显示工资条为0的值</strong>
        <a-switch v-model="postParams.showEmptyValue" checked-children="开" un-checked-children="关" class="mg_l10" />
      </a-row>
    </div>
    <a-row class="foot">
      <a-button class="mg_r12" @click="doBefor">上一步</a-button>
      <a-button type="primary" @click="next">下一步</a-button>
    </a-row>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "AddPayslipSecond",
  components: {
    step: () => import("./step")
  },

  data() {
    return {
      // 参数
      postParams: {
        sendType: 1,
        autoCheckHours: 1,
        showEmptyValue: false,
        autoCheckUnit: 1
      }
    };
  },
  computed: {
    ...mapGetters({ PAYSLIP: "wages/PAYSLIP" })
  },

  beforeDestroy() {
    this.setSalaryParams({ ...this.postParams });
  },
  methods: {
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
      } else {
        return 0;
      }
    },
    // 上一步
    doBefor() {
      const path = "/wages/add-payslip-sort";
      this.$router.push({
        path,
        query: { ...this.$route.query, ...this.postParams }
      });
    },
    ...mapMutations({
      postParam: "wages/postParams",
      setSalaryParams: "wages/setSalaryparams"
    }),
    // 选择方式
    handleChange(e) {},
    handleChangeTime(e) {},
    // 下一步
    next() {
      this.$router.push({
        path: "add-payslip-third",
        query: { ...this.$route.query, ...this.postParams }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.add-payslip-second {
  padding: 24px;
  .content-top {
    margin-top: 24px;
    padding: 40px 162px;
    background: #fafafa;
    border-radius: 4px;
  }
  .content-con {
    padding: 24px 162px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    .title {
      border-left: 4px solid var(--primary);
      padding-left: 12px;
      margin-bottom: 12px;
    }
  }
  .foot {
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
}
</style>
